<template>
  <div class="index web-inner">
      <div class="index-inner">
          <div class="index-left">
              <div class="big-lunbo index-lunbotu">
                  <lunbo :imgList="imgList"></lunbo>
              </div>
              <div class="tuijian">
                  <ad :list="bestbrand" name="精選推薦"></ad>
              </div>
              <div class="tuijian">
                  <ad :list="hotbrand" name="熱門品牌"></ad>
              </div>
              <div class="tab">
                  <indexTab :list="food" :tab="meishi"></indexTab>
              </div>
              <div class="tab">
                  <indexTab :list="drink" :tab="dianxin"></indexTab>
              </div>
              <div class="tab" v-if="skill.length>0">
                  <indexTab :list="skill" :tab="jineng"></indexTab>
              </div>
          </div>
          <div class="index-right">
              <div class="big-yuanfen big-link-image fangda">
                  <a :href="h2.link">
                      <img :src="imgUrl+h2.image" alt="">
                  </a>
              </div>
              <div class="xuqiu">
                  <indexXuqiu></indexXuqiu>
              </div>
              <div v-for="(item,index) in h3" class="yuanfen fangda">
                  <a :href="item.link">
                      <img :src="imgUrl+item.image" alt="">
                  </a>
              </div>
              <div class="baodao">
                  <indexBaodao></indexBaodao>
              </div>
              <!--<div class="news">-->
                  <!--<indexNews></indexNews>-->
              <!--</div>-->
          </div>
      </div>

      <div class="common-bottom fangda">
          <a :href="bottomImg.link">
              <img :src="imgUrl+bottomImg.image" alt="">
          </a>
      </div>
      <div class="fodong">
          <a href="#/kandeng" class="btn1">
              <img src="../../static/img/fudong1.png" alt="">
          </a>
          <div class="btn2">
              <img src="../../static/img/fodong2.png" alt="">
              <img src="../../static/img/fudong3.png" alt="">
              <a href="http://nav.cx/hXKkUnJ">
                  <img src="../../static/img/fudong4.png" alt="">
              </a>
          </div>
      </div>
  </div>
</template>

<script>
    import lunbo from "../components/swiper-lunbo"
    import ad from "../components/swiper-ad"
    import indexTab from "../components/index-tab"
    import indexXuqiu from "../components/index-xuqiu"
    import indexBaodao from "../components/index-baodao"
    import indexNews from "../components/index-news"

export default {
  name: 'home',
    components:{
        lunbo,
        ad,
        indexTab,
        indexXuqiu,
        indexBaodao,
        indexNews
    },
  data() {
      return {
        meishi:[
            {
                title:"美食品牌",
            },
            {
                title:"特色小吃",
                id:2
            },
            {
                title:"火鍋燒烤",
                id:4
            },
            {
                title:"異國美食",
                id:5
            },
        ],
        dianxin:[
            {
                title:"咖啡冰品",
            },
            {
                title:"咖啡茶飲",
                id:1
            },
            {
                title:"甜點冰品",
                id:3
            }
        ],
        jineng:[
            {
                title:"技能服務",
            },
        ],
          drink:[],
          food:[],
          h1:"",
          h2:"",
          h3:[],
          imgList:[],
          bottomImg:"",
          bestbrand:[],
          hotbrand:[],
            skill:[]
      }
  },
    mounted() {
      this.getImg()
      this.getBrandSublist()
    },
    methods:{
      getImg() {
          this.$http.post(this.API.get_banner_home).then((res) => {
              let $this = this;
          console.log(res);
          if(res.status ===200 && res.data.length>0){
              res.data.forEach((item) => {
                  if(item.location==="h1"){
                      this.h1=item;
                   }
                  if(item.location==="h2"){
                      this.h2=item;
                  }
              if(item.location==="h3"){
                  this.h3.push(item);
              }
              if(item.location==="h0"){
                  this.imgList.push(item);
              }
              if(item.location==="h4"){
                  this.bottomImg=item;
              }
          })
          }
      })
      },
        getBrandSublist() {
            this.$http.post(this.API.get_homepage_brand).then((res) => {
                let $this = this;
            if(res.status ===200 && res.data.bestbrand){
                this.bestbrand = this.Utils.sliceArr(res.data.bestbrand,4)
            }
            if(res.status ===200 && res.data.hotbrand){
                this.hotbrand = this.Utils.sliceArr(res.data.hotbrand,4)
            }
            if(res.status ===200 && res.data.drink){
                this.drink = this.drink.concat(res.data.drink.icedrink)
                this.drink = this.drink.concat(res.data.drink.coffee)
            }
            if(res.status ===200 && res.data.food){
                this.food = this.food.concat(res.data.food.chinesefood)
                this.food = this.food.concat(res.data.food.hotpot)
                this.food = this.food.concat(res.data.food.overseafood)
            }
            if(res.status ===200 && res.data.skill){
                this.skill = this.skill.concat(res.data.skill.skill)
            }
        })
        },
    }
}
</script>
<style lang="less" scoped>
  @import "../style/base";
  .index{
    margin: 0 auto;
    padding:  40px 0 0;

      a{
          color: #000000;
      }
      .index-inner{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
      }
    .index-left{
      width: 70%;
        margin-right: 5%;
        .big-lunbo{
            width: 100%;
            height: 386px;
            margin-bottom: 32px;
            position: relative;

        }
        .tuijian{
            /*height: 250px;*/
            width: 100%;
            margin-bottom: 25px;
        }
        .tab{
            width: 100%;
            margin-bottom: 25px;
        }
    }
    .index-right{
      width:29.5%;
        .big-yuanfen{
            height: 386px;
            width: 100%;
            margin-bottom: 42px;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
        }
        .xuqiu{
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 45px;
        }
        .yuanfen{
            width: 100%;
            /*height:100px;*/
            margin-bottom: 45px;
            cursor: pointer;
            img{
                width: 100%;
            }
        }
    }
  }
    .fodong{
        position: fixed;
        right:0px;
        top: 40%;
        .btn1{
            display: inline-block;
            width: 65px;
            img{
                width: 100%;
            }
        }
        .btn2{
            width: 65px;
            height: 174px;
            background-color: #385690;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            a{
                width: 60%;
                display: block;
                img{
                    width: 100%;
                }
                &:nth-child(2){
                    cursor: pointer;
                }
                &:nth-child(3){
                    cursor: pointer;
                }
            }
        }
    }
</style>
